<script setup lang="ts">
import { ref,onBeforeMount } from "vue";
import { queryDictChild } from "@/api/dict.js";
import addGroup from "./AddGroup.vue"
import dictList from "./DictList.vue"
//默认是选择哪一个
const activeName = ref();

//循环列表
const tabsOptions=ref([]);

//是否展示添加字典列表
const isShow = ref(false);

//保存之后清空数据
const saveGroup=ref();
//查询
async function queryDict(){
  //获取字典值
  let res = await queryDictChild(0);
  if(res.code == 200){
    tabsOptions.value = res.data;
    //列表中第一项作为默认
    if(tabsOptions.value.length>0){
      let tmp = tabsOptions.value[0];
      activeName.value = tmp.code;
    }
  }
}

//点击添加字典
function add(){
  //首先展示添加列表
  isShow.value = true;
  saveGroup.value.init();
}
//生命周期
onBeforeMount(() => {
  queryDict();
});
</script>

<template>
  <div class="root">

  <el-tabs v-model="activeName"  type="card" class="demo-tabs" addable editable @tab-add="add">
    <template v-for="item in tabsOptions" :key="item.code">
        <el-tab-pane :label="item.name" :name="item.code">
          <dictList :pid="item.id"/>
        </el-tab-pane>
    </template>
      </el-tabs>
    <addGroup ref="saveGroup" :visible="isShow" @close="isShow = false" @refreshData="queryDict()" />
  </div>
</template>

<style scoped lang="scss">
.root{
  background-color: white;
  height: 100%;

}
</style>
